<template>
  <div class="content">
    <!-- 顶部搜索栏 -->
    <div class="top">
      <a-card :bordered="false">
        <a-space :size="20">
          <a-button type="primary" @click="wantToOpenStore" ghost
            ><PlusCircleOutlined />想开店</a-button
          >
        </a-space>
      </a-card>
    </div>

    <!-- 表格数据展示 -->
    <div class="table">
      <a-card :bordered="false" style="height: 100vh">
        <div>
          <a-table
            :data-source="data"
            :pagination="false"
            :loading="loading"
            :scroll="{ y: 440 }"
          >
            <a-table-column
              fixed="left"
              key="image"
              title="商户图"
              data-index="image"
            >
              <template #default="{ record }">
                <a-image
                  style="border-radius: 10px"
                  :width="80"
                  :src="record.image"
                />
              </template>
            </a-table-column>
            <a-table-column fixed="left" key="status" title="详情">
              <template #default="{ record }">
                <router-link to="" @click="toStore(record.key)">
                  <a-tag color="cyan">
                   <span style="font-size: 14px;">进入</span></a-tag
                  >
                </router-link>
              </template>
            </a-table-column>
            <a-table-column
              key="homeName"
              title="店铺名"
              data-index="homeName"
              :ellipsis="true"
            />
            <a-table-column key="name" title="持有人" data-index="name" />
            <a-table-column
              key="idCard"
              :ellipsis="true"
              title="身份证"
              data-index="idCard"
            />
            <a-table-column
              :ellipsis="true"
              key="remark"
              title="简介"
              data-index="remark"
            />
            <a-table-column
              :ellipsis="true"
              key="address"
              title="地址"
              data-index="address"
            />
            <a-table-column key="status" title="状态">
              <template #default="{ record }">
                <span>
                  <a-tag v-if="record.status === '通过'" color="success">
                    {{ record.status }}</a-tag
                  >
                  <a-tag v-else-if="record.status === '未通过'" color="error">
                    {{ record.status }}</a-tag
                  >
                  <a-tag v-else color="processing"> {{ record.status }}</a-tag>
                </span>
              </template>
            </a-table-column>
          </a-table>
        </div>
        <div
          style="
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            margin-top: 30px;
          "
        >
        </div>
      </a-card>
    </div>

    <!-- 右侧弹框 -->
    <div>
      <a-drawer
        v-model:open="openDrawer"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        title="实名认证"
        :width="720"
      >
        <a-form
          ref="PhoneFormRef"
          :rules="PhoneRules"
          :model="user"
          layout="vertical"
        >
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="姓名" name="name">
                <a-input
                  placeholder="请输入真实姓名"
                  style="width: 100%"
                  v-model:value="user.name"
                  maxlength="10"
                  minlength="2"
                  size="large"
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="身份证" name="idCard">
                <a-input
                  placeholder="请输入真实身份证号"
                  style="width: 100%"
                  v-model:value="user.idCard"
                  maxlength="18"
                  minlength="18"
                  size="large"
                >
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col v-if="isRegisterPwd" :span="12">
              <a-form-item label="昵称" name="nickName">
                <a-input
                  placeholder="请设置用户昵称"
                  style="width: 100%"
                  v-model:value="user.nickName"
                  maxlength="5"
                  minlength="5"
                  size="large"
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col v-if="isRegisterPwd" :span="12">
              <a-form-item label="密码" name="password">
                <a-input
                  placeholder="请设置用户密码"
                  style="width: 100%"
                  v-model:value="user.password"
                  minlength="6"
                  size="large"
                >
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col v-if="isRegisterPhone" :span="12">
              <a-form-item label="手机号" name="phone">
                <a-input
                  placeholder="请输入手机号"
                  style="width: 100%"
                  v-model:value="user.phone"
                  minlength="11"
                  maxlength="11"
                  size="large"
                >
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="性别" name="sex">
                <a-radio-group
                  style="width: 100%"
                  size="large"
                  v-model:value="user.sex"
                >
                  <a-radio value="男">男</a-radio>
                  <a-radio value="女">女</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="地址" name="address">
                <a-textarea
                  placeholder="请输入现住真实地址"
                  style="width: 100%"
                  v-model:value="user.address"
                  size="large"
                  :rows="4"
                >
                </a-textarea>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <template #extra>
          <a-space>
            <a-button @click="onClose">取消</a-button>
            <a-button type="primary" @click="doCertification">认证</a-button>
          </a-space>
        </template>
      </a-drawer>
    </div>
  </div>
</template>

<script setup>
import {
  PlusCircleOutlined,
} from "@ant-design/icons-vue";
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { useUserStore } from "@/stores/user";
import {
  list,
} from "@/api/store";
import { certification } from "@/api/certification";
import router from "@/router";

const data = ref([]);
const user = ref({
  id: null,
  name: "",
  nickName: "",
  avatar: "",
  idCard: "",
  password: "",
  phone: "",
  sex: "",
  address: "",
});
const loading = ref(true);
onMounted(() => {
  setTimeout(() => {
    getAdmins();
    loading.value = false;
  }, 1000);
});

//请求管理员数据
const userStore = useUserStore();
function getAdmins() {
  list(userStore.user.key).then((res) => {
    if (res.code === 200 && res.data != null) {
      data.value = res.data;
    }
  });
}

//新增管理员弹框
const openDrawer = ref(false);
const isRegisterPwd = ref(false);
const isRegisterPhone = ref(false);
const wantToOpenStore = () => {
  //判断此用户已经实名认证，通过idCard是否有值来判断
  if (!userStore.user.idCard) {
    message.warning("您需实名认证才能开店哦！");
    openDrawer.value = true;
    if (!userStore.user.nickName) {
      isRegisterPwd.value = true;
    }
    if (!userStore.user.phone) {
      isRegisterPhone.value = true;
    }
  } else {
    //填写后端访问地址
    window.open("http://47.96.73.90:7080");
  }
};

//数据校验
const PhoneFormRef = ref();
const PhoneRules = {
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change",
    },
    {
      min: 11,
      max: 11,
      message: "长度为11个字符",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
  nickName: [
    {
      required: true,
      message: "请设置昵称",
      trigger: "blur",
    },
    {
      min: 5,
      max: 5,
      message: "长度为5个字符",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入真实姓名",
      trigger: "blur",
    },
  ],
  idCard: [
    {
      required: true,
      message: "请输入身份证号",
      trigger: "blur",
    },
    {
      min: 18,
      max: 18,
      message: "长度为18个字符",
      trigger: "blur",
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择性别",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请设置密码",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "请输入现住地址",
      trigger: "blur",
    },
  ],
};

//身份证号校验
let IdCardReg =
  /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//用户认证方法，
function doCertification() {
  PhoneFormRef.value
    .validate()
    .then(() => {
      //手机号验证
      if (!IdCardReg.test(user.value.idCard)) {
        message.error("请输入正确的身份证号");
      } else {
        user.value.id = userStore.user.key;
        certification(user.value).then((res) => {
          if (res.code === 200) {
            message.success("恭喜认证成功！点击想开店");
            userStore.removeUser();
            userStore.setUser(res.data);
            openDrawer.value = false;
            window.location.reload();
          }
        });
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//取消认证方法
function onClose() {
  user.value = {};
  openDrawer.value = false;
}

//跳往商铺页
function toStore(id) {
  router.push({name: "Shop",query: {id: id}})
}
</script>

<style scoped>
.options {
  margin-top: 10px;
}

.table {
  margin-top: 10px;
}

.avatar-uploader > .ant-upload {
  width: 50px;
  height: 50px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>>